<!--
 * @file 预览弹窗
 * @author liuyc
 * @description: 预览文档、图片、音视频
 * @date 2023-06-27 11:33
 -->
<template>
  <el-dialog
    :visible="showPreview"
    width="50%"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @opened="openDialog"
    @close="handelCancel">
    <div class="view_container">
      <el-image
        v-if="previewData.type === 'img'"
        :src="previewData.url"
        fit="contain"
        class="view_basic" />
      <video
        v-if="previewData.type === 'video'"
        :src="previewData.url"
        autoplay
        controls
        class="view_basic" />
      <audio
        v-if="previewData.type === 'audio'"
        :src="previewData.url"
        autoplay
        controls
        class="view_basic" />
      <div
        v-loading="loading"
        element-loading-text="正在读取文件中。。。"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 1)"
        class="view_basic">
        <iframe
          v-if="previewData.type === 'doc'"
          ref="viewIframe"
          :src="previewData.url"
          frameborder="0"
          scrolling="auto"
          class="view_iframe" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { encode } from 'js-base64';

export default {
  model: {
    prop: 'showPreview',
    event: 'closeDialog'
  },
  props: {
    /** 展示开关 */
    showPreview: {
      type: Boolean,
      default: false
    },
    /** 编辑数据 */
    defaultData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // load
      loading: false,
      // 预览数据
      previewData: {},
      // 文件大类
      typeList: {
        img: ['jpeg', 'jpg', 'gif', 'png'],
        video: ['avi', 'mp4', 'mov'],
        audio: ['wav', 'mp3'],
        doc: ['xls', 'xlsx', 'doc', 'docx', 'ppt', 'pptx', 'pdf', 'txt']
      }
    };
  },
  updated() {
    if (this.$refs.viewIframe) {
      this.$refs.viewIframe.onload = () => {
        this.loading = false;
      };
    }
  },
  methods: {
    /**
     * @description: 格式化iframe内容
     */
    formatIframe() {
      const val = this.defaultData;
      if (!val || JSON.stringify(val) === '{}') return;
      let fileUrl = val.url;
      const _this = this;
      const fileType = (function() {
        for (const key in _this.typeList) {
          if (_this.typeList[key].includes(val.type)) return key;
        }
      })();
      if (fileType === 'doc') {
        this.loading = true;
        fileUrl = 'https://ccsadm.octvv.com/file-preview/onlinePreview?url=' + encodeURIComponent(encode(val.url));
      }
      this.previewData = {
        url: fileUrl,
        type: fileType
      };
    },

    /**
     * @description: 打开dialog
     */
    openDialog() {
      this.formatIframe();
    },

    /**
     * @description: 关闭dialog
     */
    handelCancel() {
      Object.assign(this.$data, this.$options.data());
      this.$emit('closeDialog', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.view_container {
  width: 100%;
  height: 700px;

  .view_basic {
    width: 100%;
    height: 100%;
  }

  .view_iframe {
    width: 100%;
    height: 100%;
  }
}
</style>
